<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="html,css,html5,javascript">
    <meta name="author" content="yejf">
    <!-- 导入bootstrap 全局样式 -->
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" type="text/css">
    <link href="../../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <title>动态添加考试章节案例</title>

    <style type="text/css">
        .right_caret {
            text-shadow: 0 1px 0 #fff;
            margin-right: 15px;
            opacity: 80%;
        }
        .right_caret:hover {
            color: red;
        }
        .blue-bg {
            background-color: #0a6aa1 !important;
            color: #FFF;
            padding: 5px 15px !important;
        }
        .gray-bg {
            background-color: #dedede !important;
            color: #FFF;
            padding: 5px 15px !important;
        }

        .input_field {
            padding: 0px 20px;
            font-size: 13px;
            font-weight: normal;
        }
        .input_field .input {
            height: 30px;
            width: 60%;
        }
        .input:hover,.input_2:hover {
            border: 3px solid #000000;
        }

        /* 设置分值的输入框 */
        .input_2 {
            width: 50px;
            height: 27px;
            padding: 0px 5px;
            background-color: #A5DC86;
            border: none;
        }
        .btn-xs {
            padding: 3px 5px;
            font-size: 12px;
            margin-left: 5px;
        }
        /*  具体题目的样式 */
        .list-group .li-item {
            margin-bottom: 10px;
            border: 1px solid #ddd;
            padding: 5px;
            border-radius: 0px;
        }

        .list-group .li-item input {
            width: 50px;
            height: 30px;
            padding:2px 5px;
            background-color: #A5DC86;
            border: none;
        }
        .list-group .li-item span {
            background-color: #eee;
            display: inline-block;
            padding: 5px 10px;
            min-width: 85%;
            margin: 0px -4px 0px -4px;
        }
        .list-group .li-item button {
            border: none;
            height: 30px;
            padding: 0 7px;
            background-color: #cccccc;
            border-radius: 0px;
            margin-right: -4px;
        }

    </style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <!-- 新增按钮 -->
            <div style="margin-bottom: 15px;">
                <button type="button" class="btn btn-primary" id="add_section_btn">新增章节</button>
            </div>
            <!-- 折叠面板组 -->
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- 在点击增加章节时，来clone此元素，并追加到 父元素中 -->
                <div class="panel panel-default">
                    <!-- 一组章节 -->
                    <div class="panel-heading blue-bg" role="tab">
                        <h4 class="panel-title">
                            <!-- 在右上角添加关闭小图标 -->
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <!-- 添加向下的小图标 caret -->
                            <a role="button" class="pull-right right_caret" data-toggle="collapse" href="#collapseOne">
                                <span class="caret"></span>
                            </a>
                            <!-- 增加试题按钮 -->
                            <button type="button" class="btn btn-default btn-xs pull-right right_caret">
                                <span class="glyphicon glyphicon-plus">增加试题</span>
                            </button>

                            <!-- 输入项: 章节名称 -->
                            <div class="input_field">
                                <label style="color: #fff;">章节名称：</label>
                                <input type="text" name="sectionName" class="input"/>
                            </div>

                        </h4>
                    </div>
                    <!-- 要重写包一层 panel-heading -->
                    <div class="panel-heading gray-bg">
                        <h4 class="panel-title">
                            <!-- 输入项：章节描述 -->
                            <div class="input_field">
                                <label class="text-muted">章节描述：</label>
                                <input type="text" name="sectionDescription" class="input"/>
                                <!-- 批量设置分值: 这里修改padding，是为了改写 btn-xs的默认样式 -->
                                <a href="javascript:void(0);" class="btn btn-info btn-xs pull-right" data-trigger="setScore">批量设置</a>
                                <input type="text" name="scoreForEach" class="input_2 pull-right" placeholder="分值"/>
                            </div>
                        </h4>
                    </div>
                    <!-- 内容区 -->
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
                        <div class="panel-body" style="min-height: 100px;">

                            <!-- 采用列表组来做: 以下的样式是做好的,数据要从试题中选出来 -->
                            <ul class="list-group">
                                <!-- 每一个加入的题目 -->
                                <li class="list-group-item li-item">
                                    <input type="text" name="score" value="1.0">
                                    <span>中国的四大发明是什么？</span>
                                    <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i></button>
                                </li>

                                <li class="list-group-item li-item">
                                    <input type="text" name="score" value="1.0">
                                    <span>以下哪个代码是正确的java代码？</span>
                                    <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i></button>
                                </li>

                                <li class="list-group-item li-item">
                                    <input type="text" name="score" value="1.0">
                                    <span>以下哪个代码是正确的java代码？</span>
                                    <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i></button>
                                </li>
                            </ul>

                        </div>
                    </div> <!-- end of 内容区 -->
                </div><!-- end of panel -->


            </div> <!-- end of panel-group -->

        </div>
    </div>
</div>

<script src="../../static/js/jquery.min.js" type="text/javascript"></script>
<script src="../../static/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"></script>

<!-- 添加事件 -->
<script>
    $(function () {
        //0. 定义一个全局变量来表示id值
        var index_id = 1;
        var panelDefault = $(".panel.panel-default");
        //
        $(".panel-group").on("click", "a[data-trigger='setScore']", batchSetScore);
        
        //1. 给添加章节按钮添加事件
        $("#add_section_btn").on("click", function (event) {
            //选出第一个 章节组件
            var newPanelDefault = panelDefault.eq(0).clone();
            //修改此元素中的 <a> 中的id值以及 内容区的id
            $("a", newPanelDefault).attr("href", "#collapse"+index_id);
            //
            $(".panel-collapse", newPanelDefault).attr("id", "collapse"+index_id);
            //
            index_id++;
            //把复制出来的元素中的 panel-body 元素清空
            $(".panel-body", newPanelDefault).children().remove();
            //再把这个复制出来的元素添加到父元素中
            $(".panel-group").append(newPanelDefault);

            //2. 给关闭按钮添加事件
            console.log("个数："+$(".panel-group button[class='close']").length);
            $(".panel-group").on("click","button[class='close']",closePanelDefault);
            //3. 给批量设置 分数 绑定事件
            $(".panel-group").on("click", "a[data-trigger='setScore']", batchSetScore);
        });

        //定义一个函数来表达关闭组件的功能
        function closePanelDefault(event) {
            //阻止事件的冒泡传递，只需要针对当前的x 执行本方法即可
            event.stopImmediatePropagation();
            if(confirm("确定要删除该章节吗？")) {
                //
                if($(".panel.panel-default").length === 1) {
                    //
                    alert("请至少要保留一个章节!");
                } else {
                    $(event.currentTarget).parents(".panel.panel-default").remove();
                }
            }
        }

        //批量设置分值
        function batchSetScore(event) {
            //
            event.stopImmediatePropagation();
            //取值
            var score = $(event.currentTarget).siblings(".input_2").val();
            console.log("获取的分值："+score);
            //赋值：
            $(".panel-body input",$(event.currentTarget).parents(".panel.panel-default")).each(function (index, element) {
                console.log("第"+index+"个："+element);
                $(element).val(score);
            });
        }
    });

</script>

</body>
</html>